<!--公积金列表-->
<template>
	<view class="box_zzd temp_wrap clearfix">
		<!--申请人部分-->
		<view class="item_wrap clearfix">
			<view class="title_bar">客户信息</view>
			<view class="img_wrap" v-if="isNew">
				<image @click="uploadCardFront" src="/static/public/sfz.png" class="formImg" v-if="!url1"></image>
				<image :src="url1" class="formImg" v-else></image>
				<icon class='formImg_item_icon' v-if="url1" :data-id="1" type="clear" size="20" color="red" @click="clearFormImg" />
			</view>
			<view class="item_input">
				<text class="title">申请人姓名:<text class="red">*</text></text>
				<m-input class="right" type="text" v-model="data.basicBorrowerName" :disabled="isOurSelf"
					placeholder="请输入姓名"></m-input>
			</view>
			<view class="item_input">
				<text class="title">身份证号码:<text class="red">*</text></text>
				<m-input class="right" type="text" v-model="data.basicBorrowerCard" :disabled="isOurSelf"
					placeholder="身份证号码" ></m-input>
			</view>
			<view class="item_input">
				<text class="title">联系电话:<text class="red">*</text></text>
				<m-input class="right" type="number" v-model="data.basicBorrowerPhone" :disabled="isOurSelf"
					placeholder="联系电话" :maxLength="11"></m-input>
			</view>
			<view class="item_input">
				<text class="title">是否有公积金:</text>
				<view class="right address">
					<picker @change="bindPickerChange" :range="isAcc" range-key="itemText" :disabled="isOurSelf" > 
						<view>
							<input type="text" placeholder="请选择公积金" v-model="data.haveAccount" disabled/>
						</view>
					</picker>
				</view>
			</view>
			<view v-if="isShow">
				<view class="item_input">
					<text class="title">原公积金账号:<text class="red">*</text></text>
					<m-input class="right" type="number" v-model="data.account" :disabled="isOurSelf"
						placeholder="原公积金账号"></m-input>
				</view>
				<view class="item_input">
					<text class="title">原公积金账号状态:<text class="red">*</text></text>
					<view class="right address">
						<picker @change="accStatusChange" :range="accStatus" range-key="itemText" :disabled="isOurSelf"> 
							<view>
								<input type="text" placeholder="请选择账号状态" v-model="data.accountStatus" disabled/>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="item_input">
					<text class="title">银行类型:<text class="red">*</text></text>
					<view class="right address">
						<picker @change="bankTypeChange" :range="bankType" range-key="itemText" :disabled="isOurSelf"> 
							<view>
								<input type="text" placeholder="请选择银行类型" v-model="data.bankType" disabled/>
							</view>
						</picker>
					</view>
				</view>
				<view class="item_input">
					<text class="title">银行卡号:<text class="red">*</text></text>
					<m-input class="right" type="number" v-model="data.bankNum" :disabled="isOurSelf"
						placeholder="银行卡号"></m-input>
				</view>
			</view>
			<view class="item_input">
				<text class="title">受理时间:<text class="red">*</text></text>
				<view class="right address">
					<picker @change="acceptTimeChange" mode="date" :disabled="isOurSelf"> 
						<view>
							<input type="text" placeholder="请选择受理时间" v-model="data.acceptTime" disabled/>
						</view>
					</picker>
				</view>
			</view>
			<view class="item_input">
				<text class="title">需月缴金额:<text class="red">*</text></text>
				<input class="right" type="number" v-model="data.monthMoney" :disabled="isOurSelf"
					placeholder="请输入月缴金额" ></input>
				<text class="dw">（元）</text>
			</view>
			<view class="item_input">
				<text class="title">代缴存开始时间:<text class="red">*</text></text>
				<view class="right address">
					<picker @change="acceptBeginChange" mode="date" fields="month" :disabled="isOurSelf"> 
						<view>
							<input type="text" placeholder="请选择代缴存开始时间" v-model="data.agencyBeginTime" disabled/>
						</view>
					</picker>
				</view>
			</view>
			<view class="item_input">
				<text class="title">代缴存结束时间:<text class="red">*</text></text>
				<view class="right address">
					<picker @change="acceptEndChange" mode="date" fields="month" :disabled="isOurSelf"> 
						<view>
							<input type="text" placeholder="请选择代缴存结束时间" v-model="data.agencyEndTime" disabled/>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<!--end贷款信息-->
		<view class="btn_wrap" v-if="isNew">
			<button class="btn" @click="btnSubmit">确 认</button>
		</view>
		
	</view>
</template>

<script>
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	import {uploadCard} from '@/common/util.js'
	export default {
		components: {
			mInput,
		},
		props:["formData","isNew","isOurSelf"],
		data(){
			return{
				url1: null,
				bankType: [],
				isAcc: [],
				accStatus: [],
				data:{
					//申请人信息
					basicBorrowerName: null,
					basicBorrowerCard: null,
					basicBorrowerPhone: null,
					haveAccount: null,
					bankType: null,
					bankNum: null,
					account: null,
					accountStatus: null,
					acceptTime: null,
					monthMoney: null,
					agencyBeginTime: null,
					agencyEndTime: null,
				},
				//公积金上传数据
				formDataPost: {
					haveAccount: null,
					bankType: null,
					accountStatus: null,
				},
				defaultRegionCode:"500103"
			}
		},
		created() {
			this.getBaseData();
			if(this.formData){
				this.data = JSON.parse(JSON.stringify(this.formData));
				//还原公积金字典状态
				this.data.haveAccount  = this.data.haveAccount ==1 ? "有" : "否";
			}
		},
		watch:{
			//监听判断公积金状态
			accStatus: {
				handler(newObj){
					let that = this;
					if(newObj && this.formData){
						let res = newObj.filter(function(item,index,array){
						  //元素值，元素的索引，原数组。
						  return (item.itemValue == that.formData.accountStatus);
						})
						if(res[0]){
							that.data.accountStatus = res[0].itemText;
						}
					}
				},
				deep: true,
				immediate: true
			},
			//监听银行卡类型
			bankType: {
				handler(newObj){
					let that = this;
					if(newObj && this.formData){
						let res = newObj.filter(function(item,index,array){
						  //元素值，元素的索引，原数组。
						  return (item.itemValue == that.formData.bankType);
						})
						if(res[0]){
							that.data.bankType = res[0].itemText;
						}
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed:{
			isShow: function(){
				return this.data.haveAccount === "有" ? true: false
			}
		},
		methods:{
			//获取各数据字段数据
			getBaseData(){
				// (公积金)银行类型
				this.$api.getBankType().then(res=>{
					this.bankType = res.data.data; 
				}).catch(err=>{
					console.log(err)
				}),
				// (公积金)是否有公积金账号
				this.$api.getIsAcc().then(res => {
					this.isAcc = res.data.data; 
				}).catch(),
				// (公积金)账号状态
				this.$api.getAccountStatus().then(res => {
					this.accStatus = res.data.data;
				}).catch()
			},
			//是否有公积金选择事假
			bindPickerChange(e){
				let index = e.detail.value;
				this.data.haveAccount = this.isAcc[index].itemText;
				this.formDataPost.haveAccount = this.isAcc[index].itemValue;
			},
			//选择银行类型
			bankTypeChange(e) {
				let index = e.detail.value;
				this.data.bankType = this.bankType[index].itemText;
				this.formDataPost.bankType = this.bankType[index].itemValue;
			},
			//公积金状态
			accStatusChange(e) {
				let index = e.detail.value;
				this.data.accountStatus = this.accStatus[index].itemText;
				this.formDataPost.accountStatus = this.accStatus[index].itemValue;
			},
			//受理时间
			acceptTimeChange(e) {
				this.data.acceptTime = e.detail.value;
			},
			//开始时间
			acceptBeginChange(e){
				this.data.agencyBeginTime = e.detail.value;
			},
			//结束时间
			acceptEndChange(e){
				this.data.agencyEndTime = e.detail.value;
			}, 
			//上传申请人按钮
			uploadCardFront() {
				let id = 1;
				uploadCard("/applet/order/scanIdCard", id).then(res => {
					this.url1 = res.filePath;
					this.data.basicBorrowerName = res.data.name;
					this.data.basicBorrowerCard = res.data.num;
				});
			},
			//清除扫描图片
			clearFormImg(e) {
				let imgId = e.target.dataset.id ||e.currentTarget.dataset.id;
				if(imgId == 1) this.url1 = null;
			},
			//确认
			btnSubmit() {
				//检验公共的信息
				let checkRes = graceChecker.check(this.data, formRuleConfig.accfundRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				
				if(this.isShow){
					let checkResHas = graceChecker.check(this.data, formRuleConfig.accfundRuleHas);
					if (!checkResHas) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					this.formDataPost.bankType = null;
					this.data.bankNum = null;
					
				}else{
					let checkResNo = graceChecker.check(this.data, formRuleConfig.accfundRuleNo);
					if (!checkResNo) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					this.data.account = null;
					this.formDataPost.accountStatus = null;
				}
				let formData = JSON.parse(JSON.stringify(this.data));
				formData.haveAccount = this.formDataPost.haveAccount;
				formData.accountStatus = this.formDataPost.accountStatus;
				formData.bankType = this.formDataPost.bankType;
				//调用父组件的提交函数
				this.$emit("postOrderInfo", formData);
			},
		}
	}
</script>

<style scoped lang="scss">
	.item_wrap{
		margin-top: 20rpx;
		width: 100%;
		padding: 0 40rpx 60rpx 40rpx;
		background: #FFFFFF;
		.title_bar {
			font-size: 32rpx;
			font-weight: bolder;
			line-height: 42rpx;
			margin-top: 20rpx;
		}
	}
	.img_wrap{
		width: 100%;
		position: relative;
	}
	.formImg{
		width: 100%;
		height: 400rpx;
		position: relative;
	}
	.formImg_item_icon {
	    position: absolute;
	    right: 0;
		top: 0;
	}
	.item_input{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #dcdcdc;
		height: 82rpx;
		.title{
			font-size: 28rpx;
		}
		.right{
			flex: 1;
			text-align: right;
			font-size: 14px;
		}
		.address{
			padding: 20rpx 10rpx;
		}
		.addressPick{
			height: 38rpx;
			line-height: 38rpx;
			overflow: hidden;
		}
		.dw{
			font-size: 28rpx;
		}
	}
	.btn_wrap{
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx 30rpx;
		.btn{
			background: #52AAF8;
			color: #FFFFFF;
			border-radius: 40rpx;
		}
	}
</style>
